<template>
  <div class="NewElectricityPreset">
    <!-- <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="always" @click.native="btnA"> 电量任务管理 </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" @click.native="btnB"> 用户添加电量 </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="always"> 回溯时长管理 </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="always"> 吸引消耗电量管理 </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="电量任务管理"
      :visible.sync="bolA"
      :destroy-on-close="true"
      width="80%"
    >
      <BatteryTaskManagement />
    </el-dialog>
    <el-dialog :visible.sync="bolB" :destroy-on-close="true" width="80%">
      <UserElectricityAdd />
    </el-dialog> -->
    <el-card class="card">
      <el-tabs class="tab" type="border-card" v-model="active">
        <el-tab-pane name="1">
          <span slot="label">
            <span :class="{ active: active == 1 }">电量任务管理</span>
          </span>
          <div v-if="active == 1">
            <BatteryTaskManagement />
          </div>
        </el-tab-pane>
        <el-tab-pane name="2">
          <span slot="label">
            <span :class="{ active: active == 2 }">用户添加电量</span>
          </span>
          <div v-if="active == 2">
            <UserElectricityAdd />
          </div>
        </el-tab-pane>
        <el-tab-pane name="3">
          <span slot="label">
            <span :class="{ active: active == 3 }">回溯时长管理</span>
          </span>
          <div v-if="active == 3">
            <BackTime />
          </div>
        </el-tab-pane>
        <el-tab-pane name="4">
          <span slot="label">
            <span :class="{ active: active == 4 }">吸引消耗电量管理</span>
          </span>
          <div v-if="active == 4">
            <Attract />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import BatteryTaskManagement from "./components/BatteryTaskManagement.vue";
import UserElectricityAdd from "./components/UserElectricityAdd.vue";
import BackTime from "./components/BackTime.vue";
import Attract from "./components/Attract.vue";

export default {
  components: {
    BatteryTaskManagement,
    UserElectricityAdd,
    BackTime,
    Attract,
  },
  data() {
    return {
      bolA: false,
      bolB: false,
      active: "1",
    };
  },
  methods: {
    btnA() {
      this.bolA = true;
    },
    btnB() {
      this.bolB = true;
    },
  },
};
</script>

<style scoped lang="less">
.NewElectricityPreset {
  padding: 20px;
  width: 100%;
  min-height: calc(100vh - 50px);
  // .el-card {
  //   padding: 20px;
  //   text-align: center;
  // }
  // .el-row {
  //   margin-bottom: 20px;
  // }
  .card {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 90px);
    .tab {
      min-height: calc(100vh - 120px);
    }
  }
  .active {
    color: #ec6564;
  }
  /deep/.el-table td,
  /deep/.el-table th.is-leaf {
    border: none !important;
  }
}
</style>